<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>导航条基础</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <script src="../../../js/jquery-2.1.1.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
</head>
<body>
<!--基本导航条-->
<div class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>
<div class="navbar navbar-default" role="navigation">
    　<div class="navbar-header">
    　    <a href="##" class="navbar-brand">慕课网</a>
    　</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="##">CSS3</a></li>
                <li><a href="##">JavaScript</a></li>
                <li class="disabled"><a href="##">PHP</a></li>
            </ul>
        </li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
    <form action="##" class="navbar-form navbar-left" rol="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入关键词" />
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
    </form>
</div>
<hr/>
<div class="navbar navbar-default" role="navigation">
    　<div class="navbar-header">
    　    <a href="##" class="navbar-brand">慕课网</a>
    　</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="##">CSS3</a></li>
                <li><a href="##">JavaScript</a></li>
                <li class="disabled"><a href="##">PHP</a></li>
            </ul>
        </li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
    <form action="##" class="navbar-form navbar-right" rol="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入关键词" />
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
    </form>
</div>
<div class="navbar navbar-default" role="navigation"><!--navbar-default就是给指定的区域标成灰色-->
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>
<hr/>
<div class="navbar navbar-default" role="navigation">
    　<div class="navbar-header">
    　    <a href="##" class="navbar-brand">慕课网</a>
    　</div>
    <div class="nav navbar-nav">
        <a href="##" class="navbar-text">Navbar Text</a>
        <a href="##" class="navbar-text">Navbar Text</a>
        <a href="##" class="navbar-btn">Navbar Text</a>
    </div>
</div>
固定导航条
很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。
<br/>Bootstrap框架提供了两种固定导航条的方式：
<br/>? .navbar-fixed-top：导航条固定在浏览器窗口顶部
<br/>? .navbar-fixed-bottom：导航条固定在浏览器窗口底部
<br/>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    　<div class="navbar-header">
    　    <a href="##" class="navbar-brand">慕课网navbar-fixed-top</a>
    　</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例</a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>
<div class="content">我是内容</div>

<hr/>
<button class="navbar-toggle" type="button" data-toggle="collapse"value="button">
    <span class="sr-only">Toggle Navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
3、并为button添加data-target=”.类名/#id名”，究竞是类名还是id名呢？由需要折叠的div来决定。如：
需要折叠的div代码段：

<div class="collapse navbar-collapse" id="example">
    <ul class="nav navbar-nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
    button
</button>
也可以这么写，需要折叠的div代码段：

<div class="collapse navbar-collapse example" >
    <ul class="nav navbar-nav">
        123
    </ul>
</div>
窄屏时要显示的图标：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
    123
</button>
<br/><br/><br/>
7.反色导航条
反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，
<br/>只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。其实就只是将导航栏的颜色变成黑色而已。
如下：

<div class="navbar  navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a href="##" class="navbar-brand">慕课网</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="">首页</a></li>
        <li><a href="">教程</a></li>
        <li><a href="">关于我们</a></li>
    </ul>
</div>
<hr/>
8.分页导航（带页码的分页导航）<br/>
平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：
<br/>
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>
<ul class="pager">
    <li><a href="#">&laquo;上一页</a></li>
    <li><a href="#">下一页&raquo;</a></li>
</ul>
<hr/>
微章
<div class="navbar navbar-default" role="navigation">
    　<div class="navbar-header">
    　       <a href="##" class="navbar-brand">慕课网</a>
    　</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>

        <li><a href="##">成功案例<span class="badge">23</span></a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>
<a href="#">Inbox <span class="badge">42</span></a>
<!--navbar-default导航条勋章-->
<div class="navbar navbar-default" role="navigation">
    　<div class="navbar-header">
    　    <a href="##" class="navbar-brand">慕课网</a>
    　</div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="##">网站首页</a></li>
        <li><a href="##">系列教程</a></li>
        <li><a href="##">名师介绍</a></li>
        <li><a href="##">成功案例<span class="badge">23</span></a></li>
        <li><a href="##">关于我们</a></li>
    </ul>
</div>
<!--nav-pills导航条勋章-->
<ul class="nav nav-pills">
    <li class="active"><a href="#">Home <span class="badge">42</span></a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
<br />
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
    <li class="active">
        <a href="#">
            <span class="badge pull-right">42</span>
            Home
        </a>
    </li>
    <li><a href="#">Profile</a></li>
    <li>
        <a href="#">
            <span class="badge pull-right">3</span>
            Messages
        </a>
    </li>
</ul>
<br />
<!--按钮勋章-->
<button class="btn btn-primary" type="button">
    Messages <span class="badge">4</span>
</button>
</body>
</html>